<template>
    <view>
        <van-search :value="searchWord" placeholder="请输入关键字" show-action @search="searchEvent" @cancel="cancelEvent"/>
        <!--
        <van-dropdown-menu active-color="#2d8cf0" >
            <van-dropdown-item :value="stationLevel.value" :options="stationLevel.reference" ></van-dropdown-item>
            <van-dropdown-item :value="sort.value" :options="sort.reference" ></van-dropdown-item>
        </van-dropdown-menu>
        -->

        <scroll-view>

            <van-cell-group v-for="station in stations" :key="station.code">
                <van-cell :border="false" :value="station.distance">
                    <template #title>
                        <span class="custom-title">{{station.name}}</span>
                        <van-tag type="primary">{{station.code}}</van-tag>
                    </template>
                </van-cell>
                <van-cell icon="location-o" >
                    <template #title>
                        <span class="cell-label">{{station.location === undefined ? '' : station.location}}</span>
                    </template>
                </van-cell>
            </van-cell-group>


        </scroll-view>
        <van-notify id="van-notify" />
    </view>
</template>

<script>
    import Notify from '../../wxcomponents/vant/notify/notify';

    export default {
        name: "StationMain",
        data() {
            return {
                searchWord: '',
                stations: [
                    {
                        code: 'G1212',
                        name: '笋岗',
                        location: '深圳市罗湖区笋岗街道办洪湖社区笋岗东路1088号洪湖污水厂楼顶',
                        distance: '1.2km'
                    },
                    {
                        code: 'G1130',
                        name: '福田',
                        location: '深圳市福田区福田街道办福民路123号区委大楼楼顶',
                        distance: '1.5km'
                    }
                ]
            }
        },
        onLoad() {
            this.loadStations()
        },
        methods: {

            async loadStations() {
                let {lat, lon} = await this.fetchGeoLocation()
                    .then((res) => {
                        return {
                            lat: res.latitude,
                            lon: res.longitude
                        }
                    })

                console.log(`当前位置经度:${lon}, 纬度:${lat}`)
            },

            async fetchGeoLocation() {
                return new Promise(((resolve, reject) => {
                    uni.getLocation({
                        isHighAccuracy: true,
                        success: function (res) {
                            if (res.errMsg !== 'getLocation:ok') {
                                Notify('获取位置失败！')
                                console.error("获取GPS定位失败, 定位接口返回数据：", res)
                            }
                            resolve(res)
                        },
                        fail: function (err) {
                            Notify('获取位置失败')
                            console.error('获取GPS定位失败， err: ', err)
                            reject(err)
                        }
                    })
                }))
            },

            searchEvent(e) {
                this.searchWord = e.detail;
                console.log(`search event:`, e)
            },
            cancelEvent(e) {
                this.searchWord = ''
                console.log(`search cancel event:`, e)
            },
        }
    }
</script>

<style scoped>

    .custom-title {
        margin-right: 4px;
        vertical-align: middle;
    }

    .cell-label {
        color: #969799;
        font-size: 21px;
        line-height: 18px;
    }

</style>